<template>
    <div class="banner_container">
        <span class="current_time">{{ currentTime }}</span>
        <span class="title">{{ userName }}的计划清单</span>
    </div>
</template>

<script setup>
    import { computed, ref, onUnmounted, onMounted } from 'vue'
    import { useRoute } from 'vue-router';
    const route = useRoute()
    let userName = route.query.userName
    let year = ref("")
    let month = ref("")
    let dm = ref("")
    let dw = ref("")

    let hour = ref("")
    let minute = ref("")
    let second = ref("")

    onMounted(()=> {
        updateCurrentTime()
    })


    function updateCurrentTime() {
        const date = new Date()
        year.value = date.getFullYear()
        month.value = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1)
        dm.value = date.getDate() > 10 ? date.getDate() : "0" + date.getDate()

        dw.value = date.getDay()

        hour.value = date.getHours() > 10 ? date.getHours() : "0" + date.getHours();
        minute.value = date.getMinutes() > 10 ? date.getMinutes() : "0" + date.getMinutes();
        second.value = date.getSeconds() > 10 ? date.getSeconds() : "0" + date.getSeconds();
    }


    let timer = setInterval(() => {
        updateCurrentTime()
    }, 500)

    let currentTime = computed(() => {
        return `${year.value}年${month.value}月${dm.value}日，${getWeekDay(dw.value)}, ${hour.value}:${minute.value}:${second.value}`
    })


    function getWeekDay(dayOfWeek) {
        switch (dayOfWeek) {
            case 1:
                return "星期一"
            case 2:
                return "星期二"
            case 3:
                return "星期三"
            case 4:
                return "星期四"
            case 5:
                return "星期五"
            case 6:
                return "星期六"
            case 7:
                return "星期日"
            default:
                return "星期日"
        }
    }

    onUnmounted(()=> {
        clearInterval(timer)
    })

</script>

<style scoped>
.banner_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: blueviolet;
    font-size: 24px;
    color: white;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 5px;
}
</style>